<template>
  <div class="thubmup-bottom">
    <div class="some-thumb-up" @click="thumbup($event,topicindex,commentindex )" >
      <span class="yl-2zan thumbnum" :style="{'color':ywcolor}">  {{thumbupnum}}</span>
    </div>
    <div class="middlesep"></div>
    <div class="comment" @click="commentsvg($event,topicindex,commentindex,tabId)">
      <span class="yl-2ping commentnum">  {{topiccommentnum}}</span>
    </div>
  </div>
</template>
<script>
export default{
    data(){
      return{
        ywcolor: this.isup == 0 ? '#9b9b9b':'#fb685b',
      }
    },
  props:['topicindex','isup','thumbupnum','topiccommentnum','commentindex','tabId'],
  methods:{
    thumbup(event,topicindex,commentindex){
      this.$emit("thumbup",{event:event,topicindex:topicindex,commentindex:commentindex})
    },
    commentsvg(event,topicindex,commentindex,tabId){
      this.$emit("commentsvgg",{event:event,topicindex:topicindex,commentindex:commentindex,tabId:tabId})
    }
  },
  watch: {
    isup(val, oldval){
      if (val == 0){
        this.ywcolor = '#9b9b9b'
      }else{
        this.ywcolor = '#fb685b'
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .thubmup-bottom{
    display: flex;
    height: 0.95rem;
    align-items: center;
    background-color: white;
    border-bottom: 1px solid #e6e6e6
  }

  .some-thumb-up{
    flex: 1;
    text-align: center;
    font-size: 0.3rem;
    line-height: 0.9rem;
  }
  .middlesep{
    width: 1px;
    height: 0.5rem;
    background-color: #E6E6E6;
  }
  .comment{
    flex: 1;
    text-align: center;
    line-height: 0.9rem;
    font-size: 0.3rem;
  }
  .thumbnum{
    color: #9b9b9b;
  }
  .commentnum{
    color: #9b9b9b;
  }
</style>
